<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchName" placeholder="请输入检索姓名" />
			</Col>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey" placeholder="请输入检索账户" />
			</Col>
		</Row>
		<Row>
			<div class="d-flex justify-content-between align-items-center ">
				<Button class="m-1" type="error" shape="circle" @click="newUser" icon="md-add">新增</Button>
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
		</Row>
		<div class="mt-1 d-none d-xl-block">
			<!-- :class="'m-1'"  自适应 -->
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" class="mr-2" @click="show(row.empId)">详细</Button>
					<Button type="error" size="small" @click="remove(row.empId)">离职</Button>
				</template>
			</Table>
		</div>
		<div class="mt-1 d-xl-none">
			<Row>
				<Col class="p-1" v-for="(emp, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="12">
				<div class="text-xss rounded shadow text-secondary p-1 bg-light">
					<div class="p-1 d-flex justify-content-between">
						<span>员工姓名 </span><span>{{emp.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>员工手机号 </span><span>{{emp.user.tel}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>员工账户 </span><span>{{emp.user.account}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>部门名称 </span><span>{{emp.dept.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>职务名称 </span><span>{{emp.job.name}}</span>
					</div>
					<div class="p-1 d-flex justify-content-between">
						<span>状态 </span><span>{{emp.statu}}</span>
					</div>
					<div class="p-1 d-flex justify-content-end">
						<Button class="text-xss" type="error" size="small" @click="remove(emp.empId)">删除</Button>
						<Button class="text-xss ml-2" type="primary" size="small"
							@click="show(emp.empId,emp.statu)">详细</Button>
					</div>
				</div>
				</Col>
			</Row>
		</div>
		<div>
			<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				arr: [],
				searchName: "",
				searchKey: "",
				tableInfo: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
					columnInfo: [{
							title: "员工姓名",
							key: "name",
						},
						{
							title: "员工手机号",
							key: "tel",
						},
						{
							title: "员工账户",
							key: "account",
						},
						{
							title: "部门名称",
							key: "deptName",
						},
						{
							title: "职务名称",
							key: "jobName",
						},
						{
							title: "状态",
							key: "statu"
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newUser: function() {
				this.$router.detail.open({
					name: "emp_new",
				});
			},
			show: function(empId) {
				this.$router.push({
					// 用+号传单个参数，接值用  $route.query.     
					//用params传值用 $route.params. 接
					// 跳转页面用router里的path，弹窗用router里的name
					path: "/emp/info?empId=" + empId
				})
			},
			remove: function(empId) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除员工，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/emp/info",
							param: {
								empId
							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/emp/page",
					param: {
						// 传一个当前页
						current: this.tableInfo.currentPage,
						size:this.tableInfo.pageSize,
						name: this.searchName,
						account: this.searchKey,
						
					}
				}).then(data => {
					console.log(data);
					var arr = [];
					var a = [];
					a = data.records
					a.map((emp) => {
						if (emp.statu == 'CHA') {
							emp.statu = '产出中'
						} else if (emp.statu == 'NDP') {
							emp.statu = '无部门'
						} else if (emp.statu == 'BCH') {
							emp.statu = '空闲'
						} else if (emp.statu == 'WAK') {
							emp.statu = '休假中'
						} else if (emp.statu == 'LEV') {
							emp.statu = '离职中'
						} else if (emp.statu == 'OUT') {
							emp.statu = '已离职'
						}
						arr.push(emp)
					})
					for (var index = 0; index < arr.length; index++) {
						arr[index].tel = arr[index].user.tel
						arr[index].account = arr[index].user.account
						arr[index].deptName = arr[index].dept.name
						arr[index].jobName = arr[index].job.name
					}
					this.tableInfo.data = arr;
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					// 假数据中定好的size传过来
					this.tableInfo.pageSize = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			}
		},
		created: function() {
			this.init();
		}
	}
</script>

<style>

</style>